<div class="container-fluid mt-4">
    <!-- 头部标题 -->
    <div class="card mb-2">
        <!--Card content-->
        <div class="card-body">
            <h6 class="mb-2 mb-sm-0 pt-1" style="text-align: center;">权限管理</h6>
        </div>
    </div>
    <!-- 头部标题-end -->
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-header" style="text-align: center;">
                    权限维护
                </div>
                <div class="card-body content-sc">
                    <button type="button" class="mb-2 btn btn-success btn-sm float-right" data-toggle="modal"
                        data-target="#addRole">添加新权限</button>
                    <table class="table table-striped table-bordered table-align">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">编号</th>
                                <th scope="col">权限名称</th>
                                <th scope="col">权限路径</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody id="addBody">
                           
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-header" style="text-align: center;">
                    角色维护
                </div>
                <div class="card-body content-sc">
                    <button type="button" class="mb-2 btn btn-success btn-sm float-right" data-toggle="modal"
                        data-target="#addPart" >添加新角色</button>
                    <table class="table table-striped table-bordered table-align">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">编号</th>
                                <th scope="col">角色名</th>
                                <th scope="col">权限</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody id="roleBody">
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 权限添加/修改 -->
<div class="modal fade" id="addRole" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">权限添加</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="rolename">权限名称</label>
                        <input type="text" class="form-control" id="rolename">
                    </div>
                    <div class="form-group">
                        <label for="rolefile">权限页面</label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="rolefile">
                            <label class="custom-file-label" for="rolefile">选择页面文件</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addPow(this)">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 权限添加/修改-结束 -->
<!-- 权限添加/修改 -->
<div class="modal fade" id="settingRole" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">权限修改</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="roleid1">权限编号</label>
                        <input type="text" class="form-control" value="1" id="roleid1" readonly>
                    </div>
                    <div class="form-group">
                        <label for="rolename1">权限名称</label>
                        <input type="text" class="form-control" value="视频统计" id="rolename1">
                    </div>
                    <div class="form-group">
                        <label for="rolefile1">权限页面</label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="rolefile1">
                            <label class="custom-file-label" for="rolefile1">选择页面文件</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updatePow(this)">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 权限添加/修改-结束 -->
<!-- 角色添加 -->
<div class="modal fade" id="addPart" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">角色添加</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addNew">
                    <div class="form-group">
                        <label for="partname">角色名称</label>
                        <input type="text" class="form-control" id="partname" name="userName">
                    </div>
                    <div class="form-group mb-0">
                        <label for="partrole">角色权限</label>
                    </div>
                    <div class="row first" style="text-align: center;">

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addRole(this)">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 角色/修改-结束 -->
<!-- 角色修改 -->
<div class="modal fade" id="settingPart" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">角色修改</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="updateRole">
                    <div class="form-group">
                        <label for="partid">角色编号</label>
                        <input type="text" class="form-control" id="partid" value="1" name="id" readonly>
                    </div>
                    <div class="form-group">
                        <label for="partname">角色名称</label>
                        <input type="text" class="form-control" id="partname1" name="name">
                    </div>
                    <div class="form-group mb-0">
                        <label for="partrole">角色权限</label>
                    </div>
                    <div class=" first" id="allCheck" style="text-align: center;">

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateRole(this)">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 角色修改-结束 -->
<!-- <script src="../js/rolePage.js"></script> -->
<script>
    //遍历界面
    function refresh() {
        $("#addBody").html("");
        $.ajax({
            url:"../videoCourse_stu/server/selectAllPower.php",
            type:"post",
        }).done((result)=>{
            var str="";
            for (let p of result) {
                 str+=`<tr>
                            <th>${p.powerId}</th>
                            <td>${p.powerName}</td>
                            <td>${p.powerPath}</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                    data-target="#settingRole" onclick="outShow(this)">更新</button>
                            </td>
                        </tr>`
            }
            $("#addBody").append(str);
        });
    }
    refresh();

    // 刷新角色界面
    function refreshRole(obj) {
        $("#roleBody").html("");
        $.ajax({
            url:"../videoCourse_stu/server/selectAllRoleAndPowers.php",
            type:"post",
        }).done((result)=>{
            var str="";
            for (const p of result) {
                var powerName="";
                for (let i = 0; i < p.powers.length; i++) {
                    // console.log(p);
                    powerName+=`<li value="${p.powers[i].powerId}">${p.powers[i].powerName}</li>`
                }
                str+=`<tr>
                    <th>${p.roleId}</th>
                    <td>${p.roleName}</td>
                    <td>
                        <ul class="list-unstyled mb-0">
                            ${powerName}
                        </ul>
                    </td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                            data-target="#settingPart" onclick="newRole(this)">更新</button>
                    </td>
                </tr>`
            }
            $("#roleBody").append(str);
        });
        $(obj).attr("data-dismiss","modal");
    }
    refreshRole();

  //添加权限
  function addPow(obj) {
        var num=$("#addBody").children().length+1;
        var newName=$("#rolename").val();
        var newFile=$("#rolefile").val();
        
        $.ajax({
            url:"../videoCourse_stu/server/powAdd.php",
            type:"post",
            data:{num,
                newName,
                newFile},
            dataType:"json",
        }).done((result)=>{
            console.log(result);
            if(result.success){
                var str=`<tr>
                    <th>200${num}</th>
                    <td>${newName}</td>
                    <td>${newFile}</td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                            data-target="#settingRole">更新</button>
                    </td>
                </tr>`;
                $("#addBody").append(str);
            }else{
                toastr.error("添加失败");
            }
            //添加一个刷新事件
        });
        $(obj).attr("data-dismiss","modal");
        refresh();
    refreshRole();
    update();
    }

    //弹出层修改
function outShow(obj) {
    var id=$(obj).parents()[1].children[0].innerHTML;
    var powerName=$(obj).parents()[1].children[1].innerHTML;
    $("#roleid1").val(id);
    $("#rolename1").val(powerName);
}
 
    //更新权限
function updatePow(obj) {
    var id=$("#roleid1").val();
    var powerName=$("#rolename1").val();
    if (powerName) {
        $.ajax({
            url:"../videoCourse_stu/server/rolePageUpdatePow.php",
            type:"post",
            data:{
                id,
                powerName
            },
            dataType:"json"
        }).done((result)=>{
            if (!result.success) {
                toastr.error(result.msg);
            }
        })
    }else{
        toastr.warning("不能为空");
    }
    update();
    refresh();
    refreshRole();
    $(obj).attr("data-dismiss","modal");
}

    //添加角色
    function addRole(obj) {
        var name=$("#partname").val();
        var id=$("#roleBody tr").length+1;
        var checked=$("#addNew").serializeArray();
        checked.push({name: "id", value: id});

        // console.log(checked);
        if (name) {
            $.ajax({
            url:"../videoCourse_stu/server/rolePageAddRole.php",
            type:"post",
            data:checked
            }).done((result)=>{
                console.log(result);
                if (result.success) {
                    toastr.error("添加失败");
                }
            });
        }else{
            toastr.warning("名字不能为空")
        }
        update();
        refreshRole();
        $(obj).attr("data-dismiss","modal");
    }

    //刷新修改信息的复选框---共用
    function update(obj) {
        $.ajax({
            url:"../videoCourse_stu/server/selectAllPower.php",
            type:"post",
        }).done((result)=>{
            $(".first").html("");
            // console.log(result);
            var str="";
            for (let p of result) {
                 str+=`<div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" name="power[]" value="${p.powerId}" id="rolea">
                            <label class="form-check-label" for="rolea">${p.powerName}</label>
                        </div>`;
            }
            $(".first").append(str);
        });
        $(obj).attr("data-dismiss","modal");
    }
    update();
     

    //更新按钮
        function newRole(obj) {
            var id=$(obj).parents()[1].children[0].innerHTML;
            var name=$(obj).parents()[1].children[1].innerHTML;
            var check=$(obj).parents()[1].children[2].children[0].children;
            $("#partid").val(id);
            $("#partname1").val(name);
            var num=[];
            for (let j = 0; j < $("#allCheck input").length; j++) {
                $("#allCheck input").eq(j).prop("checked",false);
                for (let i = 0; i < check.length; i++) {
                   if ($("#allCheck input").eq(j).val()==$(check).eq(i).attr("value")) {
                       $("#allCheck input").eq(j).prop("checked",true);
                   }
                }
            }
        }

    //修改更新按钮
    function updateRole(obj) {

        var date=$("#updateRole").serializeArray();
        // console.log(date);
        $.ajax({
            url:"../videoCourse_stu/server/rolePageUpdateRole.php",
            type:"post",
            data:date,
            dataType:"json"
        }).done((result)=>{
            console.log(result);
        })
        refreshRole();
        $(obj).attr("data-dismiss","modal");
    }

</script>
